<template>
    <el-container class="root">
        <el-header>
            <div>指令参数</div>
        </el-header>
        <el-main>
            <NodeTree v-if="treeData && treeData.length" ref="nodeTree" :data="treeData" />
            <div v-else class="null-box">暂无数据</div>
        </el-main>
    </el-container>
</template>
<script setup lang="ts">
defineOptions({
    name: "DirectiveConfig"
})
import { ref, onMounted, watch } from 'vue';
import type { Ref } from 'vue';
import { nodeItem, NodeTree } from "../../common/index.js";
import "../../common/style.css";
import { sendCommand } from "../../api/manualTest/index";
import { useDeviceViewStore } from "../../store/deviceView";

const deviceViewStore = useDeviceViewStore();

const treeData: Ref<nodeItem[]> = ref([]);

const props = defineProps({
    treeNodeId: {
        type: String,
        default: ""
    }
})

onMounted(async () => {
    getParamsByCommandId();
});

watch(
    () => props.treeNodeId,
    () => {
        treeData.value = [];
        getParamsByCommandId();
    }
);

watch(() => deviceViewStore.clickedDevice.length,
    (val) => {
        if (val === 0) {
            clearSelfData();
        }
    });

const getParamsByCommandId = async () => {

    if (!deviceViewStore.currentDevice?.id) return;
    const testResult = await sendCommand({ deviceId: deviceViewStore.currentDevice.id, commandId: props.treeNodeId }, { commandName: "GetParamsByCommandId" });

    treeData.value = testResult.data;
}
const saveConfig = async () => {
    await sendCommand(
        {
            deviceId: deviceViewStore.currentDevice?.id,
            commandId: props.treeNodeId,
            commandParam: JSON.stringify(treeData.value)
        },
        {
            commandName: "SendCommandParam"
        });
}
const clearSelfData = () => {
    treeData.value = [];
}

defineExpose({
    getParamsByCommandId,
    saveConfig
});

</script>
<style lang="scss" scoped>
.root {
    width: 100%;
    height: 100%;

    .el-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 30px !important;
        line-height: 30px;
        background-color: #dddddd;
        font-size: 12px;
        color: #666666;
        font-weight: 500;
        padding-left: 12px;

        :deep(i) {
            font-size: 16px;
            cursor: pointer;
        }
    }

    .el-main {
        padding: 0 !important;
        background-color: #f3f3f3 !important;

        .null-box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #909399;
            font-size: 12px;
        }
    }

    .el-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        height: 40px !important;
        background-color: #f3f3f3 !important;

        // .button {
        //   height: 30px;
        // }
    }
}
</style>